<template>
    <div class="component-area-select" :style='zIndexStyle'>
        <div 
            class="component-area-select__header"
            :class='{ down : show_areaContent }'
            @click.stop='toggleAreaContent'
            ref='box'>
            <div class="component-area-select__value"
                v-if='value.length' >
                <div class='component-area-select__value-item'
                    v-for='(item,index) in value'>
                    <span>{{ item }} </span><i @click.stop='removeValue(index)' class="iconfont icon-close-hollow"></i>
                </div>
            </div>
            <div class="component-area-select__placeholder" v-else>{{placeholder}}</div>
        </div>
        <i class="component-area-select__arrow iconfont icon-arrow"></i>
        <transition name='down'>
            <div class="component-area-select__area-content"
                ref='content'
                v-show='show_areaContent' 
                @click.stop='loop' 
                :style='[styleContent,boxStyle]'>
                <span class="component-area-select__all"
                    :class='{active:!letterCitys.letter}'
                    @click='setLetterCitys({})'>所有</span>
                <loading v-if='!area.length' :size='20'></loading>
                <template v-if='area.length'>
                    <div class="component-area-select__letters">
                        <span class="component-area-select__letter-item"
                            v-for='item in area'
                            @click='setLetterCitys(item)'
                            :class='{active:letterCitys.letter == item.letter}'> {{ item.letter }} </span>
                    </div>
                    <div class="component-area-select__letter-groups-box"
                        v-if='!letterCitys.letter'>
                        <div class='component-area-select__letter-groups' v-for='item in area'>
                            <p class='component-area-select__group-letter'>{{item.letter}}</p>
                            <ul class='component-area-select__group-list'>
                                <li
                                    class='component-area-select__group-item'
                                    v-for='city in item.info'
                                    :class='{active : isSelect(city[name])}'
                                    @click.stop='changeValue(city[name])'>
                                    <span>{{ city[name] }}</span>
                                    <!-- <span v-if='transformStatus(city.status)'> ({{city.statusDesc}}) </span> -->
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="component-area__letter-citys"
                        v-if='letterCitys.letter'>
                        <p class='component-area-select__group-letter'>{{letterCitys.letter}}</p>
                        <ul class='component-area-select__group-list'>
                            <li
                                class='component-area-select__group-item'
                                v-for='city in letterCitys.info'
                                :class='{active : isSelect(city[name])}'
                                @click.stop='changeValue(city[name])'>
                                <span>{{ city[name] }}</span>
                                <!-- <span v-if='transformStatus(city.status)'> ({{city.statusDesc}}) </span> -->
                            </li>
                        </ul>
                    </div>
                </template>
            </div>
        </transition>
    </div>
</template>

<script>

    import  { mapGetters, mapActions }  from 'vuex'
    import loading from '../components/Loading.vue'

    export default {
        components:{
            loading
        },
        props:{
            value:[String,Number,Object,Array],
            area:[Array],
            placeholder:{
                type:String,
                default:'请选择'
            },
            fixed:{
                type: Boolean,
                default:false
            },
            name:{
                type:String,
                default:'value'
            },
            maxHeight:{
                type: Number,
                default:0
            },
        },
        data() {
            return {
                show_areaContent:false,
                topPos:'',
                letterCitys:{},
                boxStyle:{},
                zIndex:1,
                isAppendToBody:false
            }
        },
        computed:{
            ...mapGetters([
                'localInfo'
            ]),
            documentClickBoolean(){
                return this.localInfo.documentClick
            },
            styleContent(){
                let object = {}
                if(this.maxHeight){
                    object.maxHeight = `${this.maxHeight}px`
                }
                if(this.topPos){
                    object.top = `${this.topPos}px`
                }
                return object
            },
            selectZIndex(){
                return this.localInfo.selectZIndex
            },
            zIndexStyle(){
                return {zIndex:this.zIndex}
            }
        },
        methods:{
            ...mapActions([
                'setDocumentClick',
                'setSelectZIndex'
            ]),
            loop(){},
            transformStatus(status){
                return status && status!="OK"
            },
            isSelect(area){
                if(_.find(this.value,(value)=> value == area)) return true
                return false
            },
            removeValue(index){
                this.value.splice(index,1)
                this.setTopPos()
            },
            changeValue(area){
                if(this.isSelect(area)) {
                    return
                }

                this.value.push(area)
                this.setTopPos()
                // this.show_areaContent = false
                this.$emit('input', this.value);
                this.$emit('selected', this.value);
            },
            setTopPos(){
                if(this.fixed){
                    this.$nextTick(()=>{
                        let clientRect = this.$refs.box.getBoundingClientRect()
                        this.boxStyle.top = clientRect.top+clientRect.height+'px'
                        let height = $(this.$refs.box).height()
                        if(height == 0){
                            this.topPos = 32
                            return
                        }
                        this.topPos = height
                    })
                }
            },
            appendToBody(){
                if(this.fixed){
                    let clientRect = this.$refs.box.getBoundingClientRect()
                    if(!this.isAppendToBody) this.isAppendToBody = true
                    this.boxStyle = {
                        position:'fixed',
                        'z-index':this.zIndex + 998,
                        width:clientRect.width+'px',
                        top:clientRect.top+clientRect.height+'px',
                        left:clientRect.left+'px'
                    }
                    document.body.appendChild(this.$refs.content)
                }
            },
            toggleAreaContent(){
                this.show_areaContent = !this.show_areaContent
                if(this.show_areaContent){
                    this.appendToBody()
                    if(this.selectZIndex == 100){
                        this.zIndex = 1
                        this.setSelectZIndex(1)
                        this.setDocumentClick(false)
                        return
                    }
                    this.zIndex = this.selectZIndex+1
                    this.setSelectZIndex(this.selectZIndex+1)
                    this.setDocumentClick(false)
                    this.setTopPos()
                }
            },
            setLetterCitys(item){
                this.letterCitys = item
            }
        },
        beforeDestroy(){
            if(this.isAppendToBody) document.body.removeChild(this.$refs.content)
        },
        watch: {
            'documentClickBoolean'(newVal,oldVal){
                if(newVal == true) {
                    this.show_areaContent = false
                }
            }
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    .component-area-select{
        position: relative;
        width: 100%;
        z-index:9;
    }
    .component-area-select__header{
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        color: $green;
        border: 1px solid $green;
        background-color: rgba(0, 150, 136, 0.1);
        border-radius:4px;
        padding:0 8px;
        line-height: 30px;
        &:hover{
            background-color: rgba($green,0);
        }
        &.down{
            background-color: rgba($green,0);
            border-bottom:1px solid $sectionColor;
            border-radius: 4px 4px 0 0;
        }
    }
    .component-area-select__show-button{
        width: 70px;
        text-align: center;
        cursor:pointer;
        font-size: 12px;
        font-weight: normal;
        padding:8px 20px;
        color:#fff;
        background-color: $green;
        border:1px solid $green;
        border-radius:4px;
        box-sizing:border-box;
    }
    .component-area-select__value{
        margin-right: 0;
        flex:1;
        display: flex;
        flex-wrap:wrap;
    }
    .component-area-select__placeholder{
        font-size: 14px;
        line-height: 30px;
    }
    .component-area-select__value-item{
        display: block;
        margin:3px 6px 3px 0px;
        padding:5px;
        border:1px solid $green;
        border-radius: 3px;
        line-height: 1;
        span{
            display: inline-block;
            vertical-align:middle;
        }
        .iconfont{
            padding-left: 4px;
            display: inline-block;
            vertical-align:middle;
            font-size: 14px;
            width: 14px;
            line-height: 14px;
        }
    }
    .component-area-select__area-content{
        width: 100%;
        max-height:360px;
        overflow:auto;
        box-sizing:border-box;
        // box-shadow:0 2px 12px 0 rgba(0,0,0,.1);
        border:1px solid $green;
        border-radius: 0 0 4px 4px;
        border-top:none;
        position: absolute;
        top:32px;
        left:0;
        cursor:pointer;
        background-color: #fff;
        font-size: 13px;
    }
    .component-area-select__arrow{
        position: absolute;
        right:0;
        top:50%;
        width: 13px;
        height:13px;
        font-size: 13px;
        color:$green;
        transform:translate(0,-50%) rotate(90deg);
    }
    .component-area-select__letter-groups{
        padding-bottom: 10px;
        &:last-child{
            padding-bottom:0;
        }
    }
    .component-area-select__group-letter{
        width: 44px;
        padding:5px 10px;
        text-align: left;
        font-size: 15px;
        font-weight: normal;
        color:$green;
    }
    .component-area-select__group-list{
        flex:1;
    }
    .component-area-select__letters{
        font-size: 13px;
        padding:5px 5px;
        border-bottom:1px solid $sectionColor;
        display:flex;
        flex-wrap: wrap;
    }
    .component-area-select__letter-item{
        cursor:pointer;
        display: block;
        width: 20px;
        text-align:center;
        padding:3px 0px;
        &.active{
            color:$green;
            font-weight: normal;
        }
        &:hover{
            color:$green;
        }
    }
    .component-area-select__all{
        display: block;
        padding:10px 10px 5px 10px;
        font-size: 13px;
        &:hover{
            color:$green;
        }
        &.active{
            color:$green;
            font-weight: bold;
        }
    }
    .component-area-select__group-item{
        padding:7px 10px;
        line-height:1.4;
        cursor:pointer;
        color:$importColor;
        position: relative;
        &.disabled{
            color:$grayLight;
            &:hover{
                color:$grayLight;
            }
        }
        &.active:after{
            position: absolute;
            right:10px;
            top:50%;
            margin-top:-7px;
            font-family:"iconfont" !important;
            font-size:14px;
            font-style:normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            content:'\e72e'
        }
        &:hover{
            color:#fff;
            background-color: darken($green,.1)
        }
    }
    .component-area-select__arrow{
        position: absolute;
        z-index:-1;
        right:10px;
        top:50%;
        width: 13px;
        height:13px;
        font-size: 13px;
        color:$green;
        transform:translate(0,-50%) rotate(90deg);
    }
</style>